@charset "UTF-8";
//-----------------------------------------------------	
// mixin simple scss
// 因为表格，按钮，表单这三个组件scss文件设计的比较复杂
// 而在一些小项目中，我们根本不需要那么多，只要简单的就ok
// 所以这个文件提供一份简单的表格，按钮，表单元素的mixin
//-----------------------------------------------------


// 按钮
//-----------------------------------------------------
$simpleBtnSize:     $baseFontSize 16px 28px !default;//字体大小，左右padding，高度或行高
$simpleBtnColor:    $textColor #e6e6e6 !default;//文本色，背景色
$simpleBtnRadius:   $baseRadius !default;//圆角大小，设置为false则不产生圆角
//普通按钮
%simple-btn{
  @include inline-block;
  cursor: pointer;
  text-align: center;

  font-size: nth($simpleBtnSize,1);
  padding:0  nth($simpleBtnSize,2);
  line-height: nth($simpleBtnSize,3);
  color: nth($simpleBtnColor,1);
  background-color: nth($simpleBtnColor,2);

  @if $simpleBtnRadius{
    @include border-radius($simpleBtnRadius);
  }

  &:hover{
    color: nth($simpleBtnColor,1);
    background-color: darken(nth($simpleBtnColor,2),5%);
  }
}

// input或button按钮
%simple-formbtn{
  @include inline-block;
  cursor: pointer;
  text-align: center;
  border: 0 none;

  font-size: nth($simpleBtnSize,1);
  padding:0  nth($simpleBtnSize,2);
  height: nth($simpleBtnSize,3);
  color: nth($simpleBtnColor,1);
  background-color: nth($simpleBtnColor,2);  

  @if $simpleBtnRadius{
    @include border-radius($simpleBtnRadius);
  }

  &:hover{
    color: nth($simpleBtnColor,1);
    background-color: darken(nth($simpleBtnColor,2),5%);
  }

  @if $lte7 {
    *overflow:visible;
  }
}


// 表格
//-----------------------------------------------------

// 表格的参数依次为：边框颜色，单元格padding，th的文字色，th的背景色
// 其中th的文字和背景色可以不写，如$simpleTable:  $gray 8px;
// 或者只有文字色没有背景色，如$simpleTable:  $gray 8px #333;
// 但不允许只有背景色而没有文本色
$simpleTable:  $gray 8px #333 #f4f4f4 !default;

%simple-table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: $baseGap;

  &,
  & th,
  & td{
  	border:1px solid nth($simpleTable,1);
  }

  th,td{
  	padding: nth($simpleTable,2);
  	text-align: left;
  }
  // 如果
  @if length($simpleTable) > 3{
	  th{
	  	color: nth($simpleTable,3);
	  	
	  	@if length($simpleTable) > 4{
	  		background-color: nth($simpleTable,4);
	  	}
	  }
  }
}


// 表单元素
// 默认1px的border和4px的padding
//-----------------------------------------------------
$simpleForm:             12px $gray #52a8ec $baseRadius  !default;//参数依次为：字体大小，边框颜色，focus时边框颜色，圆角大小
$simpleFormRowHeight:    (12px * 1.5) + 10px !default;//一行高度 = 行高+border+padding
$simpleFormShadow:       inset 0 1px 3px rgba(0, 0, 0, 0.1) !default;//默认内阴影

// 重置表单元素
// 可为  button, input, select, textarea元素设置
%reset-form-ele{
	font-family: Tahoma;
	font-size: nth($simpleForm,1);
	margin: 0;
	vertical-align: middle;
}

// radio & checkbox 的重置
%reset-radio-checkbox{
	margin:0 5px 0 0;
	padding:0;
	font-size: nth($simpleForm,1);
	//ie6,7得设置宽度和高度才能表现和其他浏览器一样的重置
	//radio和checkbox的大小为13px
	@if $lte7 {
		width:13px;
		height:13px;
	}
}

// input, select, textarea的基础样式
// 边框，padding，圆角及outline
%simple-form-basic{
  border: 1px solid nth($simpleForm,2);
  padding: 4px;

  @if nth($simpleForm,4){
    @include border-radius(nth($simpleForm,4));
  }
  &:focus{
    outline: 0 none;
  }
}

// 输入框
%simple-text{
	@extend %simple-form-basic;
  height: $simpleFormRowHeight - 10px;//减掉border和padding的高度
	
  @include transition(border linear 0.2s, box-shadow linear 0.2s);
  @include box-shadow($simpleFormShadow);

  &:focus{
    border-color: rgba(nth($simpleForm,3), 0.8);
    @include box-shadow($simpleFormShadow, 0 0 8px rgba(nth($simpleForm,3), 0.6));
  }
}

// textarea
%simple-textarea{
	@extend %simple-text;
  vertical-align: top;
}

// select
%simple-select{
  @extend %simple-form-basic;

  // select lte ie7
  // ie6,7 不支持select的padding
  @if $lte7 {
      *margin-top:($simpleFormRowHeight - 18px) / 2;
      *margin-bottom:($simpleFormRowHeight - 18px) / 2;
      *vertical-align:top;
  }
}

// submit 或 button直接使用btn中的 %simple-inputbtn